<template>
  <div class="home-container">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <PieChart />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <BarChart />
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card>
          <LineChart />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import PieChart from './components/pieChart.vue'
import BarChart from './components/barChart.vue'
import LineChart from './components/lineChart.vue'
</script>

<style scoped>
.home-container {
  padding: 20px;
  height: calc(100vh - 50px); /* 减去头部导航的高度 */
  overflow-y: auto;          /* 添加垂直滚动 */
  box-sizing: border-box;    /* 确保padding不会增加容器高度 */
}
.el-card {
  margin-bottom: 20px;
}

:deep(.el-card__body) {
  padding: 20px;
}
</style>
